import type { FC, ReactNode } from 'react'
import React, { memo, useEffect } from 'react'
import { Button, Result } from 'antd'
import { SmileOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

interface IProps {
  children?: ReactNode
}

const ResetSuccess: FC<IProps> = (props) => {
  const navigate = useNavigate()

  useEffect(() => {
    const timer = setTimeout(() => {
      navigate('/login')
    }, 3000)
    return () => {
      clearTimeout(timer)
    }
  }, [])

  function handleBtnClick() {
    navigate('/login')
  }

  return (
    <Result
      icon={<SmileOutlined />}
      title="修改密码成功,3s后返回登录页"
      extra={
        <Button type="primary" onClick={handleBtnClick}>
          立即跳转
        </Button>
      }
    />
  )
}

export default memo(ResetSuccess)
